<!-- 门店入驻 -->
<template>
	<view class="apply-commission-wrap page_box">
		<!-- 标题栏 -->
		<!-- <view class="head-box"><shopro-navbar back-icon-color="#fff" :background="{}"></shopro-navbar></view> -->

		<!-- 表单 -->
		<view class="apply-form content_box">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :labelStyle="labelStyle" prop="type" label="商品形式" label-position="top" label-width="150" :borderBottom="true">
					<u-radio-group v-model="model.type" @change="radioGroupChange" data-type="xingshi" activeColor="#fc005a">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in xinglist" :key="index" 
							:name="item.value"
							:value="item.value"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="标题" prop="title">
					<u-input placeholder="请输入标题" :placeholderStyle="placeholderStyle" v-model="model.title" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="副标题" prop="subtitle">
					<u-input placeholder="请输入副标题" :placeholderStyle="placeholderStyle" v-model="model.subtitle" type="text"></u-input>
				</u-form-item>
				<!-- 状态 -->
				<u-form-item :labelStyle="labelStyle" prop="status" label="商品状态" label-position="top" label-width="150" :borderBottom="true">
					<u-radio-group v-model="model.status" @change="radioGroupChange" activeColor="#fc005a">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in peisonglist" :key="index" 
							:name="item.value"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				<!-- <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="排序" prop="realname">
					<u-input placeholder="请输入排序" :placeholderStyle="placeholderStyle" v-model="model.realname" type="text"></u-input>
				</u-form-item> -->
				<u-form-item :labelStyle="labelStyle" prop="image" label="主图" label-position="top" label-width="150" :borderBottom="true">
					<u-upload
						:placeholderStyle="placeholderStyle"
						:showProgress="false"
						@on-uploaded="uploadSuccess($event, 'image')"
						@on-remove="uploadRemove($event, 'image')"
						:action="`${$API_URL}/index/upload`"
						:file-list="model.fileImages"
						width="148"
						height="148"
						max-count="1"
					></u-upload>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" prop="images" label="轮播图" label-position="top" label-width="150" :borderBottom="true">
					<u-upload
						:placeholderStyle="placeholderStyle"
						:showProgress="false"
						@on-uploaded="uploadSuccess($event, 'images')"
						@on-remove="uploadRemove($event, 'images')"
						:action="`${$API_URL}/index/upload`"
						:file-list="model.fileImages"
						width="148"
						height="148"
						maxCount="8"
					></u-upload>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="商品分类" prop="category_Name">
					<u-input type="select" placeholder="请选择商品分类" disabled :placeholderStyle="placeholderStyle" v-model="model.category_Name" @click="onSelect('class')"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="销量" prop="show_sales">
					<u-input placeholder="请输入销量" :placeholderStyle="placeholderStyle" v-model="model.show_sales" type="text"></u-input>
				</u-form-item>
				<!-- 配送方式 -->
				<u-form-item :labelStyle="labelStyle" prop="dispatch_type" label="配送方式" label-position="top" label-width="150" :borderBottom="true" v-if="model.type == 'normal'">
					<u-checkbox-group v-model="model.dispatch_type" @change="checkboxGroupChange" activeColor="#fc005a">
						<u-checkbox 
							@change="checkboxChange" 
							v-for="(item, index) in list" :key="index" 
							:name="item.value"
							v-model="item.checked"
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<!-- 商品类型 -->
				<u-form-item :labelStyle="labelStyle" prop="hexiao" label="商品类型" label-position="top" label-width="150" :borderBottom="true" v-if="model.type == 'virtual'">
					<u-radio-group v-model="model.hexiao" @change="radioGroupChange" data-type="xingshi" activeColor="#fc005a">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in shoplist" :key="index" 
							:name="item.value"
							:value="item.value"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item
						:labelStyle="labelStyle"
						label-position="left"
						label="到店/自提" 
						prop="dispatch_idstwo.name" 
						label-width="150"
						v-if="model.type == 'virtual'"
				>
				   <u-input
				   	type="select"
				   	:select-open="showtwo"
				   	v-model="model.dispatch_idstwo.name"
				   	placeholder="请选择到店/自提"
				   	:placeholderStyle="placeholderStyle"
				   	@click="shangpei(2)"
				   ></u-input>
				</u-form-item>
				<!-- 物流 商家 自提配送 -->
				<u-form-item
						:labelStyle="labelStyle"
						label-position="left"
						label="物流快递" 
						prop="dispatch_idsone.name" 
						label-width="150"
						v-if="peisongOne&&model.type == 'normal'"
				>
				   <u-input
				   	type="select"
				   	:select-open="showone"
				   	v-model="model.dispatch_idsone.name"
				   	placeholder="请选择物流快递"
				   	:placeholderStyle="placeholderStyle"
				   	@click="shangpei(1)"
				   ></u-input>
				</u-form-item>
				<u-form-item
						:labelStyle="labelStyle"
						label-position="left"
						label="到店/自提" 
						prop="dispatch_idstwo.name" 
						label-width="150"
						v-if="peisongTwo&&model.type == 'normal'"
				>
				   <u-input
				   	type="select"
				   	:select-open="showtwo"
				   	v-model="model.dispatch_idstwo.name"
				   	placeholder="请选择到店/自提"
				   	:placeholderStyle="placeholderStyle"
				   	@click="shangpei(2)"
				   ></u-input>
				</u-form-item>
				<u-form-item
						:labelStyle="labelStyle"
						label-position="left"
						label="商家配送" 
						prop="dispatch_idsthree.name" 
						label-width="150"
						v-if="peisongThree&&model.type == 'normal'"
				>
				   <u-input
				   	type="select"
				   	:select-open="showthree"
				   	v-model="model.dispatch_idsthree.name"
				   	placeholder="请选择商家配送"
				   	:placeholderStyle="placeholderStyle"
				   	@click="shangpei(3)"
				   ></u-input>
				</u-form-item>
				
				
				<u-form-item :labelStyle="labelStyle" prop="is_sku" label="商品规格" label-position="top" label-width="150" :borderBottom="true">
					<u-radio-group v-model="model.is_sku" @change="radioGroupChange" activeColor="#fc005a">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in guilist" :key="index" 
							:name="item.value"
							:disabled="item.disabled"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label="售卖价格" prop="price" label-width="150">
					<u-input placeholder="请输入售卖价格" :placeholderStyle="placeholderStyle" v-model="model.price" type="number"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label="划线价格" prop="original_price" label-width="150">
					<u-input placeholder="请输入划线价格" :placeholderStyle="placeholderStyle" v-model="model.original_price" type="number"></u-input>
				</u-form-item>
				<view class="guiview" v-if="model.is_sku == 1">
					<text class="guige">规格</text>
					<!-- <text class="guimiao">可添加多个规格</text> -->
					<!-- <view class="tianjia">
						添加
					</view> -->
				</view>
				
				<view class="guiitem" v-if="model.is_sku == 1">
					<view class="guiitemview" v-for="(item,index) in guigeList" :key='index'>
						<view class="guiges">
							<text class="guiges_left">规格名称</text>
							<view class="guiges_view">
								<u-input class="guiges_input" v-model="item.name" placeholder="请输入"/>
							</view>
							<!-- <image src="../../../static/images/cuowu.png" mode="" class="cuowu"></image> -->
						</view>
						<view class="guiitemview_row">
							<view class="guiges">
								<text class="guiges_left">规格值</text>
								<view class="guiges_view" v-for="(i,ind) in item.children">
									<u-input class="guiges_input" v-model="i.name" placeholder="请输入"/>
									<image src="../../../static/images/cuowu.png" mode="" class="cuowuabs" @click="guigezhi(ind)"  v-if="item.children && item.children.length>1"></image>
								</view>
								<u-icon name="plus-circle" color="#fc005a" size="40" class="xinzeng" @click="guigezinzneg()"></u-icon>
							</view>
							
						</view>
						<view class="guiges guigezhi" v-for="(i,ind) in item.children">
							<text class="guiges_leftzhi">{{i.name}}</text>
							<view class="guiges_views">
								<text class="guiges_left">图片</text>
								<u-upload
									:placeholderStyle="placeholderStyle"
									:showProgress="false"
									@on-uploaded="uploadSuccess($event, 'guiimage',ind)"
									@on-remove="uploadRemove($event, 'guiimage',ind)"
									:action="`${$API_URL}/index/upload`"
									:file-list="model.fileImages"
									width="148"
									height="148"
									maxCount="1"
									style="border: 1px solid #ccc;border-radius: 10px;"
								></u-upload>
							</view>
							<view class="guiges_views">
								<text class="guiges_left">价格</text>
								<u-input class="guiges_input" v-model="i.price" placeholder="请输入"/>
							</view>
							<view class="guiges_views">
								<text class="guiges_left">库存</text>
								<u-input class="guiges_input" v-model="i.stock" placeholder="请输入"/>
							</view>
						</view>
					</view>
					
					
				</view>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="服务标签" prop="service_names">
					<u-input type="select" placeholder="请选择服务标签" disabled :placeholderStyle="placeholderStyle" v-model="model.service_names" @click="onSelect('week')"></u-input>
				</u-form-item>
				<view class="guiview">
					<text class="guige">参数详情</text>
					<!-- <text class="guimiao">可添加多个规格</text> -->
					<view class="tianjia" @click="canshuadd()">
						添加
					</view>
				</view>
				
				<view class="guiitem">
					<view class="guiitemview">
						<view class="guiges guigezhi canshu" v-for="(item,index) in model.params" :key="index">
							<view class="guiges_views">
								<text class="guiges_left">参数名称</text>
								<u-input class="guiges_input" v-model="item.title" placeholder="请输入"/>
							</view>
							<view class="guiges_views">
								<text class="guiges_left">内容</text>
								<u-input class="guiges_input" v-model="item.content" placeholder="请输入"/>
								<text class="shanchu" @click="canshudel(index)" v-if="model.params.length>1">删除</text>
							</view>
						</view>
					</view>
					
					
				</view>
				<u-form-item :labelStyle="labelStyle" prop="content" label="图文详情" label-position="top" label-width="150" :borderBottom="true">
					<u-upload
						:placeholderStyle="placeholderStyle"
						:showProgress="false"
						@on-uploaded="uploadSuccess($event, 'tuwen')"
						@on-remove="uploadRemove($event, 'tuwen')"
						:action="`${$API_URL}/index/upload`"
						:file-list="model.fileImages"
						width="148"
						height="148"
						maxCount="8"
					></u-upload>
				</u-form-item>
				
				<!-- <u-form-item :labelStyle="labelStyle" label-position="left" label="手机号" prop="phone" label-width="150">
					<u-input placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model="model.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="申请名称" prop="name">
					<u-input placeholder="请输入门店名称" :placeholderStyle="placeholderStyle" v-model="model.name" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" prop="images" label="展示图片" label-position="top" label-width="150" :borderBottom="true">
					<u-upload
						:placeholderStyle="placeholderStyle"
						:showProgress="false"
						@on-uploaded="uploadSuccess($event, 'storeImg')"
						@on-remove="uploadRemove($event, 'storeImg')"
						:action="`${$API_URL}/index/upload`"
						:file-list="model.fileImages"
						width="148"
						height="148"
						maxCount="1"
					></u-upload>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="营业时间" prop="openhours">
					<u-input
						type="select"
						:select-open="selectShow"
						v-model="model.openhours"
						placeholder="请选择营业时间"
						:placeholderStyle="placeholderStyle"
						@click="onSelect('time')"
					></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="营业天数" prop="weeks">
					<u-input type="select" placeholder="请选择营业天数" disabled :placeholderStyle="placeholderStyle" v-model="model.weeks" @click="onSelect('week')"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" right-icon="map-fill" :right-icon-style="{color:'#4CB89D'}" label-width="150" label-position="left" label="所在地区" prop="area">
					<u-input type="text" disabled v-model="model.area" placeholder="请点击定位" @click="chooseLocation"></u-input>
				</u-form-item>
				<u-form-item :border-bottom="false" :labelStyle="labelStyle" label-width="150" label-position="left" label="详细地址" prop="address">
					<u-input type="textarea" border placeholder="请输入详细地址~" :placeholderStyle="placeholderStyle" v-model="model.address"></u-input>
				</u-form-item> -->
				<!-- <view class="agreement u-flex u-col-center">
					<u-checkbox v-model="model.agreement" activeColor="#4CB89D" shape="circle" @change="onAgreement"></u-checkbox>
					<view class="agreement-text" @tap="toProtocol">勾选代表同意《申请协议》</view>
				</view> -->
				<view class="u-flex u-row-center u-col-center"><button class="u-reset-button save-btn" @tap="onSubmit" :disabled="isFormEnd">立即上架</button></view>
			</u-form>
		</view>

		<!-- 弹窗 -->
		<u-select v-if="selectShow" :mode="selectMode" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>

		<!-- 服务标签 -->
		<u-popup v-model="showWeeksModal" safe-area-inset-bottom mode="bottom">
			<view class="week-modal">
				<view class="u-flex u-row-between u-p-x-30 week-modal--head ">
					<view></view>
					<view class="action text-red" @tap="saveWeekModals">确定</view>
				</view>
				<view class="u-flex u-flex-wrap u-p-x-30 u-p-y-30 week-modal--content">
					<view v-for="(item, index) in weekcheckbox" class="week-btn" :key="index">
						<button @tap="onSelectWeek(index)" class="cu-btn" :class="!item.checked ? 'line-red' : 'bg-red'">{{ item.name }}</button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 权限验证 -->
		<u-popup v-model="showNotice" mode="center" border-radius="20">
			<view class="notice-modal">
				<view class="img-wrap"><image class="notice-img" :src="authNotice.img" mode=""></image></view>
				<view class="notice-title">{{ authNotice.title }}</view>
				<view class="notice-detail">{{ authNotice.detail || '' }}</view>
				<button class="u-reset-button notice-btn" @tap="onAuthBtn(authNotice.btnPath)">{{ authNotice.btnText }}</button>
				<button class="u-reset-button back-btn" @tap="$Router.back()">返回</button>
			</view>
		</u-popup>
		<!-- 商家配送弹窗选择 -->
		<u-picker v-model="showone" mode="selector" :default-selector="[0]" :range="peisongOneList" range-key="name" @confirm="confirm1" ></u-picker>
		<u-picker v-model="showtwo" mode="selector" :default-selector="[0]" :range="peisongTwoList" range-key="name" @confirm="confirm2" ></u-picker>
		<u-picker v-model="showthree" mode="selector" :default-selector="[0]" :range="peisongThreeList" range-key="name" @confirm="confirm3" ></u-picker>
		<!-- 选择分类 -->
		<u-popup v-model="classModal" safe-area-inset-bottom mode="bottom">
			<view class="week-modal">
				<view class="u-flex u-row-between u-p-x-30 week-modal--head ">
					<view class="action text-green" style="color: #1bbdc2;font-weight: bold;" @tap="saveWeekModal(1)">下一级</view>
					<view class="action text-green" style="color: #1bbdc2;font-weight: bold;" @tap="saveWeekModal(2)">确定</view>
				</view>
				<!-- <view class="u-flex u-flex-wrap u-p-x-30 u-p-y-30 week-modal--content">
					<view v-for="(item, index) in weekcheckbox" class="week-btn" :key="index">
						<button @tap="onSelectWeek(index)" class="cu-btn" :class="!item.checked ? 'line-green' : 'bg-green'">{{ item.name }}</button>
					</view>
				</view> -->
				<view class="classhead">
					<view class="classitem" :class="classid == i.id ?'calssactive':''" v-for="(i,ind) in classname" @click="isoneClass(i.id,ind)">
						<text>{{i.name}}</text>
					</view>
					<!-- <view class="classitem calssactive">
						<text>分类1</text>
					</view> -->
				</view>
				<view class="classlist">
					<view class="item" :class="item.id == classtwoid?'itemactive':''" v-for="(item,index) in isclass" :key="index" @click="isClass(item.id,item.name)">
						{{item.name}}
						<image src="../../../static/images/dui.png" mode="" class="dui"></image>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import Auth from '@/shopro/permission/index.js';
import { mapMutations, mapActions, mapState,mapGetters } from 'vuex';
import { MAP_KEY } from '@/env.js';
export default {
	components: {},
	data() {
		return {
			showNotice: false,
			showWeeksModal: false, //星期弹窗
			isFormEnd: false,
			weekcheckbox: [],
			authNotice: {},
			// 表单
			errorType: ['message'],
			selectShow: false,
			selectMode: 'mutil-column', // single-column, mutil-column, mutil-column-auto
			selectType: '',
			selectList: [],
			labelStyle: {
				'font-size': '28rpx',
				'font-weight': '500',
				color: '#333'
			},
			placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
			model: {
				// name: '', //门店名称
				// phone: '', //手机号
				// realname: '', //真实姓名
				// openhours: '', //营业时间
				// openweeks: '', //营业周期
				// weeks: '',
				// area: '',
				// area_id: '', //行政区域ID
				// address: '', //门店地址
				// latitude: '', //纬度
				// longitude: '', //京都
				// images: [], //门店图片
				// images_original: [],
				// fileImages: [],
				// agreement: false,
				
				type:'normal',//virtual 虚拟商品  normal 真实商品
				title:'',//标题
				subtitle:'',//副标题
				status:'up',//up 上架 down 下架
				category_ids:'',//所属分类 136,148
				category_Name:'',//分类名称
				image:[],//商品主图
				images:[],//轮播图
				params:[{}],//参数详情
				content:[],//图文详情
				price:'',//价格
				original_price:'',//原价
				is_sku:'0',//是否是多规格 1是 0否
				show_sales:'',//显示销量
				service_ids:'',//服务标签 4,2,1
				service_names:'',//服务标签（前端使用）
				dispatch_type:'express',//配送方式 express,selfetch,store
				dispatch_ids:'',//发货模版
				dispatch_idsone:{
					id:'',
					name:''
				},//物流模版（前端使用）
				dispatch_idstwo:{
					id:'',
					name:''
				},//自提模版（前端使用）
				dispatch_idsthree:{
					id:'',
					name:''
				},//商家模版（前端使用）
				store_id:uni.getStorageSync('storeId'),//所属店铺
				stock:'',//库存
				listData:[],//单规格传
				priceData:[],//单规格传key
				hexiao:'selfetch'
			},
			guigeList:[{
				children:[{}]
			}],//规格数组
			dispatch_type:'express', //默认请求物流
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: ['change', 'blur']
					}
				],
				subtitle: [
					{
						required: true,
						message: '请输入副标题',
						trigger: ['change', 'blur']
					}
				],
				show_sales: [
					{
						required: true,
						message: '请输入销量',
						trigger: ['change', 'blur']
					}
				],
				price: [
					{
						required: true,
						message: '请输入售卖价格',
						trigger: ['change', 'blur']
					}
				],
				original_price: [
					{
						required: true,
						message: '请输入划线价格',
						trigger: ['change', 'blur']
					}
				]
			},
			checkboxValue1:'',
			model1: {
				userInfo: {
					name: 'uView UI',
					sex: '',
				},
			},
			selectorObj: [
				{
					cateName: '1',
					id: 1
				},
				{
					cateName: '2',
					id: 2
				}
			],
			// 配送方式数据
			list: [
				{
					name: '物流快递',
					checked: true,
					disabled: false,
					value:'express'
				},
				{
					name: '自提/到店',
					checked: false,
					disabled: false,
					value:'selfetch'
				},
				{
					name: '商家配送',
					checked: false,
					disabled: false,
					value:'store'
				}
			],
			state:'',//
			guilist: [
				{
					name: '单规格',
					checked: false,
					value: '0'
				},
				{
					name: '多规格',
					checked: false,
					value: '1'
				}
			],
			peisonglist:[
				{
					name: '上架',
					value:'up'
				},
				{
					name: '下架',
					value:'down'
				}
			],
			xinglist:[
				{
					name: '实体商品',
					checked: true,
					value:'normal'
				},
				{
					name: '虚拟商品',
					checked: false,
					value:'virtual'
				}
			],
			shoplist:[
				{
					name: '核销券（需到店核销）',
					checked: true,
					value:'selfetch'
				}
			],
			classModal:false,
			classid:'',
			classtwoid:'',
			classtwoname:'',
			classlist:[],//分类列表
			isclass:[],//当前渲染列表
			classname:[],//选中头部数据
			showone: false,
			showtwo:false,
			showthree:false,//物流 自提 商家配送弹窗显示
			peisongOne:true,//物流快递展示
			peisongTwo:false,//自提到店展示
			peisongThree:false,//商家配送展示
			peisongOneList:[],//物流快递展示数据
			peisongTwoList:[],//自提到店展示数据
			peisongThreeList:[],//商家配送展示数据
		};
	},
	computed: {
	...mapGetters(['initStore']),
		selectWorkerTime() {
			let mArr = [];
			for (let i = 0; i <= 24; i++) {
				let t = String(i).padStart(2, '0');
				mArr.push(
					{
						value: `${t}:00`,
						label: `${t}:00`
					},
					{
						value: `${t}:30`,
						label: `${t}:30`
					}
				);
			}
			mArr.pop();
			return [mArr, mArr];
		}
	},
	onLoad() {
		// this.getStoreInfo();
		this.getService();//获取服务
		this.getCate();//获取分类
		this.getdispath();//添加商品-获取模板
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		// 选择商品分类
		saveWeekModal(type) {
			if(type == 2){
				//确定
				let classname= this.classname
				let names =[]
				let ids = []
				for(let i in classname){
					names.push(classname[i].name)
					ids.push(classname[i].id)
				}
				names.push(this.classtwoname)
				ids.push(this.classtwoid)
				this.model.category_Name=names.toString()
				this.model.category_ids=ids.toString()
				this.classModal =false
			}else if(type == 1){
				//下一级
				console.log(this.classtwoid)
				let isclass = this.isclass
				let classname = this.classname
				let classid = this.classid
				let classtwoid = this.classtwoid
				let classtwoname = this.classtwoname
				for(let i in isclass){
					if(isclass[i].id == this.classtwoid){
						if(isclass[i].children){
							this.isclass = isclass[i].children
							let b ={}
							b.name = isclass[i].name
							b.id = isclass[i].id
							classid = isclass[i].id
							classtwoid=isclass[i].children[0].id
							classtwoname = isclass[i].children[0].name
							classname.push(b)
							
						}
					}
				}
				
				this.classname = classname
				this.classid = classid
				this.classtwoid = classtwoid
				this.classtwoname = classtwoname
				// this.isclass = isclass
			}
			
			
		},
        saveWeekModals(){//点击服务标签确定按钮
			this.showWeeksModal = false;
			let arr = [];
			let arr2 = [];
			console.log(this.weekcheckbox)
			this.weekcheckbox.forEach(item => {
				if (item.checked) {
					arr.push(item.id);
					arr2.push(item.name);
				}
			});
			this.model.service_ids = arr.join(',');
			this.model.service_names = arr2.join(',');
		},
		// 选择星期
		onSelectWeek(index) {
			this.weekcheckbox[index].checked = !this.weekcheckbox[index].checked;
		},

		// 弹窗按钮
		onAuthBtn(path) {
			path &&
				this.$Router.push({
					path: path
				});
			this.showNotice = false;
		},

		// 上传图片成功
		uploadSuccess(e, type,ind) {
			console.log(e)
			switch (type) {
				case 'storeImg':
					this.model.images = [];
					e.forEach(item => {
						this.model.images.push(item.response.data.url);
					});
					break;
				case 'image':
					this.model.image = [];
					e.forEach(item => {
						// fullurl
						this.model.image.push(item.response.data.url);
					});
					console.log(this.model.image)
					break;
				case 'images':
					// this.model.images = [];
					e.forEach(item => {
						this.model.images.push(item.response.data.url);
					});
					break;
				case 'tuwen':
					// this.model.images = [];
					e.forEach(item => {
						this.model.content.push(item.response.data.url);
					});
					break;		
				case 'guiimage':
				let guigeList = this.guigeList
				
					e.forEach(item => {
						for(let i in guigeList){
							guigeList[i].children[ind].image = item.response.data.url
						}
					});
					this.guigeList =guigeList
					console.log(guigeList)
					break;			
				default:
					return;
			}
		},

		// 移除图片
		uploadRemove(index, type,ind) {
			switch (type) {
				case 'storeImg':
					this.model.images.splice(index, 1);
					break;
				case 'image':
					this.model.image.splice(index, 1);
					break;
				case 'images':
					this.model.images.splice(index, 1);
					break;
				case 'tuwen':
					this.model.content.splice(index, 1);
					break;
				case 'guiimage':
				    let guigeList = this.guigeList
					for(let i in guigeList){
						guigeList[i].children[ind].image = ''
					}
					this.guigeList =guigeList
					console.log(guigeList)
					break;		
				default:
					return;
			}
		},

		// 地址选择
		async chooseLocation() {
			let authState = await new Auth('userLocation').check();
			authState &&
				uni.chooseLocation({
					success: res => {
						this.model.latitude = res.latitude;
						this.model.longitude = res.longitude;
						this.getLocationInfo();
					},
					fail: err => {
						console.log(err);
					}
				});
		},

		//逆坐标解析
		async getLocationInfo() {
			this.chooseAddress = '定位中...';
			const [error, res] = await uni.request({
				url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.model.longitude},${this.model.latitude}&key=${MAP_KEY}`
			});
			if (res.data.status === '1') {
				const addressComponent = res.data.regeocode.addressComponent;
				this.model.area_id = addressComponent.adcode;
				this.model.area = `${addressComponent.province}-${addressComponent.city.length ? addressComponent.city : addressComponent.province}-${addressComponent.district}`;
				this.model.address = res.data.regeocode.formatted_address.replace(`${addressComponent.province}${addressComponent.city}${addressComponent.district}`, '');
			} else {
				console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
			}
		},

		onSelect(type) {
			this.selectType = type;
			switch (type) {
				case 'time':
					this.selectShow = true;
					this.selectMode = 'mutil-column';
					this.selectList = this.selectWorkerTime;
					break;
				case 'week':
					this.showWeeksModal = true;
					break;
				case 'class':
					this.classModal = true;
					break;	
				default:
					return;
			}
		},

		// 选择时间
		selectConfirm(e) {
			switch (this.selectType) {
				case 'time':
					this.model.openhours = '';
					e.map((val, index) => {
						this.model.openhours += this.model.openhours == '' ? val.label : ' - ' + val.label;
					});
					break;
				default:
					return;
			}
		},

		// 勾选同意
		onAgreement(e) {
			this.model.agreement = e.value;
		},

		// 门店详情
		getStoreInfo() {
			let that = this;
			that.$http('store.shopInfo').then(res => {
				if (res.code === 1) {
					res.data && this.authStatus(res.data);
				}
			});
		},
		// 跳转门店协议
		toProtocol() {
			this.initStore.protocol && this.jump('/pages/public/richtext', { id: this.initStore.protocol })
		},

		// 初始化model
		initModel() {
			// 构建星期
			let weeksArr = this.model.openweeks.split(',');
			let weekTextArr = [];
			this.weekcheckbox.forEach(item => {
				if (weeksArr.includes(item.value)) {
					weekTextArr.push(item.name);
					item.checked = true;
				}
			});
			this.model.weeks = weekTextArr.join(',');
			// 构建省市区
			if (this.model.province_name) {
				this.model.area = `${this.model.province_name}-${this.model.city_name}-${this.model.area_name}`;
			}
			if (this.model.images) {
				this.model.images.forEach(item => {
					this.model.fileImages.push({
						url: item
					});
				});
			}
			// 协议
			this.$set(this.model, 'agreement', false);
		},

		// 状态鉴权
		authStatus(data) {
			switch (String(data.status)) {
				case '0':
					this.showNotice = true;
					this.model = { ...this.model, ...data };
					this.initModel();
					this.authNotice = {
						img: this.$IMG_URL + '/imgs/commission/auth_check.png',
						title: '正在审核中',
						detail: data.status_msg,
						btnText: '修改信息',
						btnPath: ''
					};
					break;
				case '-1':
					this.showNotice = true;
					this.model = { ...this.model, ...data };
					this.initModel();
					this.authNotice = {
						img: this.$IMG_URL + '/imgs/commission/auth_reject.png',
						title: '您的申请已被驳回！',
						detail: data.status_msg,
						btnText: '重新申请',
						btnPath: ''
					};
					break;
				case '1':
					this.showNotice = false;
					break;

				default:
			}
		},

		
        getService() { //获取服务
        	let that = this;
        	that.$http('home.getservice',{
				store_id:uni.getStorageSync('storeId')
			}).then(res => {
        		if (res.code === 1) {
					let weekcheckbox = res.data
					for(let i in weekcheckbox){
						weekcheckbox[i].checked = false
					}
        			this.weekcheckbox = weekcheckbox
        		}
        	});
        },
		getCate() {//获取分类
			let that = this;
			that.$http('home.getCate',{
				store_id:uni.getStorageSync('storeId')
			}).then(res => {
				if (res.code === 1) {
					this.classlist = res.data
					this.isclass = res.data[0].children
					this.classid = res.data[0].id
					this.classtwoid =  res.data[0].children[0].id
					this.classtwoname =  res.data[0].children[0].name
					let a = []
					let b ={}
					b.id = res.data[0].id
					b.name = res.data[0].name
					a.push(b)
					this.classname = a
					console.log(this.classname)
				}
			});
		},
		getdispath(){
			let that = this;
			that.$http('home.getdispath',{
				store_id:uni.getStorageSync('storeId'),
				type:this.dispatch_type
			}).then(res => {
				if (res.code === 1) {
					if(this.dispatch_type == 'express'){
						this.peisongOneList = res.data
					}else if(this.dispatch_type == 'selfetch'){
						this.peisongTwoList = res.data
					}else if(this.dispatch_type == 'store'){
						this.peisongThreeList = res.data
					}
				}
			});
		},
		// 提交
		onSubmit() {
			let that = this;
			console.log(JSON.stringify(that.model))
			// 商品分类1 配送方式 服务标签1 多规格 参数详情 
			if (!that.model.image.length) {
				this.$u.toast('请上传商品主图');
				return;
			}
			if (!that.model.images.length) {
				this.$u.toast('请上传商品轮播图');
				return;
			}
			if (!that.model.category_ids) {
				this.$u.toast('请选择商品分类');
				return;
			}
			// 配送方式
			if (that.model.dispatch_type.indexOf("express") != -1) {
				// 包含物流
				if(!that.model.dispatch_idsone.id){
					this.$u.toast('请选择物流快递');
					return;
				}
				
			}
			if (that.model.dispatch_type.indexOf("selfetch") != -1) {
				// 包含自提
				if(!that.model.dispatch_idstwo.id){
					this.$u.toast('请选择自提到店');
					return;
				}
			}
			if (that.model.dispatch_type.indexOf("store") != -1) {
				// 包含商家配送
				if(!that.model.dispatch_idsthree.id){
					this.$u.toast('请选择商家配送');
					return;
				}
			}
			if (!that.model.service_ids) {
				this.$u.toast('请选择服务标签');
				return;
			}
			if (!that.model.params[0].title) {
				this.$u.toast('请填写参数');
				return;
			}
			// 配送方式id处理
			let ids = []
			if (that.model.dispatch_type.indexOf("express") != -1) {
				// 包含物流
				ids.push(that.model.dispatch_idsone.id)
			}
			if (that.model.dispatch_type.indexOf("selfetch") != -1) {
				// 包含自提
				ids.push(that.model.dispatch_idstwo.id)
			}
			if (that.model.dispatch_type.indexOf("store") != -1) {
				// 包含商家配送
				ids.push(that.model.dispatch_idsthree.id)
			}
			if(that.model.is_sku == 1){
				//多规格
				let guigeList = that.guigeList
				let listData =[]
				let priceData =[]
				let gui ={}
				gui.name = guigeList[0].name
				gui.children =[]
				let children = guigeList[0].children
				for(let i in children){
					let b ={}
					b.name = children[i].name
					gui.children.push(b)
					
					// priceData 传值
					let c = {}
					c.price = children[i].price
					c.stock = children[i].stock
					c.image = children[i].image
					c.name = children[i].name
					let d = []
					d.push(children[i].name)
					c.goods_sku_text = d
					priceData.push(c)
				}
				listData.push(gui)
				// console.log(priceData) that.model.priceData
				// console.log(listData) that.model.listData
				that.model.priceData = priceData
				that.model.listData = listData
			}
			that.model.dispatch_ids = ids.toString();
			that.model.image = that.model.image.toString();
			that.model.images = that.model.images.toString();
			that.model.content = that.model.content.toString();
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('成功')
					console.log(JSON.stringify(that.model))
					// if (!this.model.agreement) return this.$u.toast('请勾选协议');
					that.applyStore();
				} else {
					this.$u.toast('请完善表单');
				}
			});
		},
		// 提交商品
		applyStore() {
			let that = this;
			this.isFormEnd = false;
			that.$http('home.goodsadd', that.model, '提交中...').then(res => {
				this.isFormEnd = true;
				if (res.code === 1) {
					uni.showToast({
						title: res.msg,
						success: () => {
							that.$Router.back();
						}
					});
				}
			});
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		 // 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			console.log(e);
			if(e.name == 'express'){
				this.peisongOne = e.value
			}else if(e.name == 'selfetch'){
				this.peisongTwo = e.value
			}else if(e.name == 'store'){
				this.peisongThree = e.value
			}
			this.dispatch_type = e.name 
			this.getdispath();//获取模版
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			let a = []
			for(let i in e){
				a.push(e[i])
			}
			this.model.dispatch_type = a.toString()
		},
		shangpei(type){
			if(type == 1){
				//物流
				this.showone = true
			}else if(type == 2){
				//自提
				this.showtwo = true
			}else if(type == 3){
				//商家配送
				this.showthree = true
			}
			
		},
		confirm1(e){ //物流下拉选择
			// console.log('confirm', e[0])
			this.model.dispatch_idsone.id = this.peisongOneList[e[0]].id
			this.model.dispatch_idsone.name = this.peisongOneList[e[0]].name
		},
		confirm2(e){ //自提下拉选择
			this.model.dispatch_idstwo.id = this.peisongTwoList[e[0]].id
			this.model.dispatch_idstwo.name = this.peisongTwoList[e[0]].name
		},
		confirm3(e){ //商家下拉选择
			this.model.dispatch_idsthree.id = this.peisongThreeList[e[0]].id
			this.model.dispatch_idsthree.name = this.peisongThreeList[e[0]].name
		},
		radioGroupChange(e) {
			console.log(e);
			if(e == 'virtual'){ //虚拟商品
				this.dispatch_type = 'selfetch'
				this.getdispath();//获取模版
			}
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			console.log(e);
		},
		isClass(e,name){
			this.classtwoid = e
			this.classtwoname = name
		},
		isoneClass(id,index){//顶部分类切换
			let classlist = this.classlist
			let classname = this.classname
			this.classid = id
			classname.splice(index+1,classname.length-1)
			this.classname = classname
			if(index == 0){
				//第一级
				for(let i in classlist){
					if(id == classlist[i].id){
						if(classlist[i].children){
							this.isclass = classlist[i].children
							let b ={}
							b.name = classlist[i].name
							b.id = classlist[i].id
							this.classtwoid=classlist[i].children[0].id
							this.classtwoname=classlist[i].children[0].name
						}
					}
				}
			} else if(index == 1){
				//第二级
				for(let i in classlist){
					for(let j in classlist[i].children){
						if(id == classlist[i].children[j].id){
							if(classlist[i].children[j].children){
								this.isclass = classlist[i].children[j].children
								this.classtwoid=classlist[i].children[j].children[0].id
								this.classtwoname=classlist[i].children[j].children[0].name
							}
						}
					}
					if(id == classlist[i].id){
						if(classlist[i].children){
							this.isclass = classlist[i].children
							let b ={}
							b.name = classlist[i].name
							b.id = classlist[i].id
							this.classtwoid=classlist[i].children[0].id
							this.classtwoname=classlist[i].children[0].name
						}
					}
				}
			}
		},
		guigezinzneg(){
			//规格新增
			let a = {}
			let guigeList = this.guigeList
			for(let i in guigeList){
				guigeList[i].children.push(a)
			}
			this.guigeList = guigeList
		},
		guigezhi(index){//删除
			let guigeList = this.guigeList
			for(let i in guigeList){
				guigeList[i].children.splice(index,1)
			}
		},
		canshudel(index){
			//参数删除操作
			let params = this.model.params
			for(let i in params){
				if(i == index){
					params.splice(i,1)
				}
			}
			this.params = params
		},
		canshuadd(){
			//参数新增
			let params = this.model.params
			let a ={}
			params.push(a)
			this.params = params
		}
	}
};
</script>

<style lang="scss">
.apply-commission-wrap {
	background-color: #fff;
	.head-box {
		background: url($IMG_URL+'/imgs/user/sh_leader_apply_head.png') no-repeat;
		background-size: 100% auto;
		height: 370rpx;
	}
}
// 表单
.apply-form {
	width: 750rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	.agreement {
		margin-top: 20rpx;
		.agreement-text {
			font-size: 24rpx;
			font-weight: 500;
			color: #4cb89d;
		}
	}
	.save-btn {
		width: 690rpx;
		line-height: 86rpx;
		background: #fc005a;
		// box-shadow: 0px 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
		border-radius: 43rpx;
		font-weight: 500;
		color: #ffffff;
		margin: 30rpx 0;
	}
}

// 星期
.week-modal {
	.week-modal--head {
		height: 100rpx;
		border-bottom: 1rpx solid $u-border-color;

		.text-cancel {
			color: #ccc;
		}
		.text-green {
			color: #18b566;
		}
	}
	.week-modal--content {
		.week-btn {
			margin-right: 56rpx;
			margin-bottom: 30rpx;
			&:nth-of-type(4n) {
				margin-right: 0;
			}
		}
	}
}

// 提示
.notice-modal {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 612rpx;
	min-height: 658rpx;
	background: #ffffff;
	padding: 30rpx;
	border-radius: 20rpx;
	.img-wrap {
		margin-bottom: 50rpx;
		.notice-img {
			width: 180rpx;
			height: 170rpx;
		}
	}
	.notice-title {
		font-size: 35rpx;
		font-weight: bold;
		color: #46351b;
		margin-bottom: 28rpx;
	}
	.notice-detail {
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 36rpx;
		margin-bottom: 50rpx;
	}
	.notice-btn {
		width: 492rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: linear-gradient(90deg, #2dae9c, #6bc29e);
		box-shadow: 0 7rpx 11rpx 2rpx rgba(61, 179, 156, 0.34);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		margin-bottom: 10rpx;
	}
	.back-btn {
		width: 492rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #3ab29c;
		background: none;
	}
}
.guiitem{
	
	width: 100%;
	// height: 200px;
	border-radius: 10px;
	.guiges{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px 0px 10px;
		flex-wrap: wrap;
		.guiges_view{
			width: 100px;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			margin-right: 8px;
			margin-bottom: 8px;
		}
		.cuowu{
			width: 15px;
			height: 15px;
			margin-left: 20px;
		}
		.cuowuabs{
			position: absolute;
			right: -6px;
			top: -5px;
			width: 15px;
			height: 15px;
		}
		.guiges_left{
			width: 55px;
			font-size: 10px;
			color: #333;
			font-weight: bold;
		}
		.guiges_input{
			border: 1px solid #666;
			// background-color: #999;
			padding:0 10px !important;
			border-radius: 5px;
			color: #333;
			min-height: 25px;
			font-size: 10px;
			width: 100px;
		}
	}
}
.guiitemview{
	background-color: #f5f5f5;
	border-radius: 10px;
	margin-bottom: 10px;
}
.guiitemview_row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.xinzeng{
	margin-left: 8px;
}
.guige{
	font-size: 14px;
	font-weight: 500;
	color: rgb(51, 51, 51);
	display: inline-block;
	margin: 15px 0;
	.guimiao{
		color: #999;
		font-size: 10px;
		margin-left: 10px;
		display: inline-block;
	}
}
.tianjia{
	    background: #fc005a;
		margin-left: auto;
		padding: 3px 13px;
		height: 26px;
		border-radius: 25px;
		color: #fff;
		font-size: 10px;;
		display: flex;
		align-items: center;
		justify-content: center;
}
.guiview{
	display: flex;
	align-items: center;
	flex-direction: row;
}
.classhead{
	height: 45px;
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 10px;
	border-bottom: 1px solid #eee;
	.classitem{
		color: #333;
		font-size: 12px;
		margin-right: 10px;
		border: 1px solid #eee;
		padding: 3px 10px;
		border-radius: 4px;
	}
	.calssactive{
		color: #fff;
		border: 1px solid rgba(27,189,194,1);
		background-color: rgba(27,189,194,1);
	}
}
.classlist{
	padding: 10px;
	min-height: 200px;
	max-height: 500px;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	.item{
		padding: 10px 0;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #eee;
	}
	.dui{
		width: 16px;
		height: 10px;
		margin-left: auto;
		display: none;
	}
	.itemactive .dui{
		display: inline-block;
	}
}
.guigezhi{
	border-top: 1px solid #eee;
	display: flex;
	flex-direction: column !important;
	align-items: flex-start !important;
	.guiges_leftzhi{
		display: block;
		font-size: 10px;
		color: #333;
		font-weight: bold;
		width: 100%;
		margin-bottom: 10px;
	}
	.guiges_views{
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		margin-right: 8px;
		margin-bottom: 8px;
		.guiges_input{
			width: 80%;
		}
	}
}
.shanchu{
	color: #333;
	font-weight: 500;
	margin-left: 10px;
}
.canshu{
	border: none;
	margin-bottom: 10px !important;
}
</style>
